<template>
	<view>
		<zmm-watermark :watermark="userStore.watermark" v-if="userStore.watermark"></zmm-watermark>
		<view class="content detail">
			<!--位置打卡-->
			<view class="detail-item">
				<uni-section title="位置打卡" type="line"></uni-section>
				<view class="detail-content location">
					<view class="location-loading main-flex" @click="clock">
						<view class="location-loading-icon" v-if="isLoading"></view>
						<text class="location-loading-text" v-if="isLoading">定位中</text>
						<view class="location-loading-clock main-flex" v-else>位置打卡</view>
					</view>
					<view class="location-info" v-if="!isLoading && address">
						<view class="">地点：{{address}}</view>
						<view class="">时间：{{time}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 打卡框 -->
		<up-modal
			:show="showLocation"
			@confirm="confirmLocation"
			@cancel="closeLocation"
			@close="closeLocation"
			showCancelButton
			title="确认打卡" >
			<view class="slot-location">
				<view class="">地点：{{address}}</view>
				<view class="">时间：{{time}}</view>
			</view>
		</up-modal>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, onMounted, ref } from 'vue';
import { tab, auth, modal } from "@/plugins"
import { getTitle } from "@/utils/getter"
import { checkPermi, checkRole, checkOnlyPermi, checkOnlyRole } from "@/utils/permission"
import { getUserLocation, conversion } from '@/utils/ty.js';
import useUserStore from '@/store/modules/user'
import { timeFormat } from 'uview-plus'
import { salesmanPathAdd } from "@/api/erp_api/sale"

	const userStore = useUserStore()
	onLoad((option) => {
		getLocation()
	})
	
	const isLoading = ref(false)
	const address = ref('')
	const time = ref('')
	const location = ref(null)
	// 获取当前位置
	const getLocation = () => {
		isLoading.value = true
		getUserLocation().then(res => {
			isLoading.value = false
			location.value = {
				latitude: res.latitude,
				longitude: res.longitude
			}
			address.value = res.formatted_address
			time.value = timeFormat('', 'yyyy-mm-dd h:M:s')
		}).catch(err => {
			modal.showToast(err)
		})
	}
	const showLocation = ref(false)
	// 点击打卡
	const clock = () => {
		if (isLoading.value) return false
		time.value = timeFormat('', 'yyyy-mm-dd h:M:s')
		showLocation.value = true
	}
	
	// 关闭弹窗
	const closeLocation = () => {
		showLocation.value = false
	}
	// 确认打卡
	const isLocation = ref(false)
	const confirmLocation = async () => {
		if (isLocation.value) return false
		if (!location.value || !location.value.latitude) return modal.showToast('经纬度不存在')
		const point = await conversion(location.value.longitude, location.value.latitude)
		if (point.latitude && point.latitude !== '0') {
			isLocation.value = true
			salesmanPathAdd({
				lat: point.latitude,
				lng: point.longitude,
				recordTime: time.value,
				userId: userStore.user.userId,
				remark: '打卡'
			}).then(async res => {
				closeLocation()
				modal.showToast('打卡成功')
				await uni.$u.sleep(1000)
				isLocation.value = false
				uni.$emit('refreshList');  // 触发刷新事件
			}).catch((err) => {
				modal.showToast(err)
				isLocation.value = false
			})
		}
	}
	
</script>

<style scoped lang="scss">
	.location {
		&-loading {
			position: relative;
			width: 200rpx;
			height: 200rpx;
			justify-content: center;
			border-radius: 50%;
			background-color: #3c9cff;
			box-shadow: 0 4px 8px rgba(60, 156, 255, 0.5);
			overflow: hidden;
			z-index: 2;
			margin: 0 auto;
			&-icon {
				position: absolute;
				width: 200rpx;
				height: 200rpx;
				top: 100rpx;
				left: 100rpx;
				background: linear-gradient(45deg, #FFFFFF, transparent 50%);
				animation: rotate 3s linear infinite;
				transform-origin: left top;
			}
			&-text {
				font-size: 36rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
			&-clock {
				width: 100%;
				height: 100%;
				font-size: 36rpx;
				font-weight: bold;
				color: #FFFFFF;
				justify-content: center;
			}
		}
		&-info {
			margin-top: 40rpx;
		}
	}
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
</style>
